<div id="programs_htmx_container">
    {% for username, programs in programs_per_user.items() %}
    <div id="{{ username }}_programs_container" class="border-2 rounded-lg shadow-sm border-gray-400 p-5 m-4">
        <div class="flex flex-row justify-between items-center mb-4">
            <h2 class="text-3xl mt-0">{{ username }}</h2>
            <h2 class="text-3xl mt-0" id="program_name_{{username}}"></h2>
            <button class="red-btn-new" data-cy="hide" _="on click remove #{{ username }}_programs_container">
                {{ _('close') }}
            </button>
        </div>
        {% if programs|length == 0 %}
            <div class="flex flex-row gap-5 w-full items-center justify-center">
                <p class="text-xl text-center" data-cy="no-programs">{{_('no_programs')}}</p>
            </div>
        {% else %}
            <div class="flex flex-row h-[32rem] gap-5 w-full">
                <div class="flex flex-col gap-2 w-1/4 overflow-auto">
                    {% for program in programs %}
                        <div class="flex flex-col p-4 gap-1 rounded-lg hover:bg-gray-300 active:bg-gray-400 ease-in transition duration-100 bg-white border border-gray-400 shadow-sm rounded-lg show-program-button"
                            role="button" _="on click
                                            add .hidden to .program-{{ username}}
                                            remove .hidden from #program_{{ program.id }}
                                            then add .bg-white to .show-program-button
                                            then remove .bg-white from me
                                            then add .bg-gray-400 to me
                                            put '{{ program.name }}' into #program_name_{{ username }}">
                            <span class="text-lg text-blue-700">{{ program.name }}</span>
                            <div class="flex flex-row gap-2">
                                <span class="">{{_('number_lines')}}</span>
                                <span class="font-bold">{{ program.number_lines }}</span>
                            </div>
                            <div class="flex flex-row gap-2">
                                <span class="">{{_('last_edited')}}</span>
                                <span class="font-bold">{{_('ago')|replace("{timestamp}", program.date)}}</span>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <div class="w-3/4 h-full min-h-full">
                    {% for program in programs %}
                        <div class="turn-pre-into-ace program-{{ username }} mb-4 overflow-auto rounded-md transition-opacity hidden h-full min-h-full"
                            id="program_{{ program.id }}">
                            <pre level="{{ program.level }}" class="view-program min-h-full h-full">{{ program.code }}</pre>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>
    {% endfor %}

</div>